<template>
  <div>
    <div class="treebox">
      <el-tree node-key="id"
      :data="form.treeData"
      default-expand-all
      :check-strictly="true"
      :expand-on-click-node="false"
      :highlight-current="true"
      :check-on-click-node="showtable"
      :render-content="renderContent"
      ></el-tree>
    </div>
    <el-button @click="handleQueck">快速关联</el-button>
    <el-button @click="goStepBack">返回上一次操作</el-button>
  </div>
</template>

<script>
import { clone } from '@/utils/common.js'
  export default {
    data() {
      return {
        form: {
          treeData: [
            {
              id: 1,
              label: '一级 1',
              styflag: false
            },
            {
              id: 2,
              label: '一级 2',
              styflag: false
            },
            {
              id: 3,
              label: '一级 3',
              styflag: false,
              children: [
                {
                  id: 44,
                  label: '一级 44',
                  styflag: false,
                }
              ]
            }
          ]
        },
        copyForm: {},
        historyForm: [],
        showtable: true,
        selectCurrentObj: {},
        id: 10,
        selectParentObj: [],
        centerFlag: [],
        centerTag: ''
      }
    },
    watch: {
      historyForm (val) {
        console.log(val)
      }
    },
    methods: {
      getTreeNodeShowFlag (data) {
        let row = {}
        for (let i=0; i< data.length; i++) {
          if (data[i].styflag) {
            row = data[i]
            break
          } else if (data[i].children && data[i].children.length > 0) {
            row = this.getTreeNodeShowFlag(data[i].children)
          }
        }
        return row
      },
      // 点击tree中节点
      handleClickTreeChild (node) {
        let val = node.data.level
        if (this.centerTag && val !== this.centerTag) {
          this.showtable = false
          this.$message.warning("只能选择同级别的")
          return
        }
        node.data.styflag = !node.data.styflag
         let row = this.getTreeNodeShowFlag(this.form.treeData)
         if (!row.level) {
           this.centerTag = ""
           return
         }
          this.centerTag = val
        console.log(this.form.treeData)
      },
      renderContent(h, { node, data, store }) {
        // console.log(node, data, store)
        return (
          <span class="custom-tree-node">
            <span class={[data.styflag ? 'redflag' : '', 'nodesty']} onClick={(data) => this.handleClickTreeChild(node)}>{node.label}</span>
            { data.styflag &&
              <span>
              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
            </span>
            }
          </span>
        )
      },
      getHandleNode (val, data) {
        console.log(val)
        if (this.centerTag && val.level !== this.centerTag) {
          console.log(1)
          this.showtable = false
          return
        }
        this.centerTag = val.level
        
      },
      // 返回上一次操作
      goStepBack () {
        this.historyForm.pop()
        if (this.historyForm.length === 0) {
          this.form.treeData = this.copyForm.treeData
          return
        }
        let lastAry = this.historyForm[this.historyForm.length-1].treeData
        this.centerFlag = clone(lastAry)
        this.form.treeData = this.centerFlag
        // this.$set(this.form, 'treeData', clone(lastAry))
        // this.form.treeData = lastAry
      },
      handleNodeClick(val, node, cur) {
        console.log(val, 111)
        val.label = "123"
        val.id = "999"
        this.selectCurrentObj = val
        this.selectParentObj = node
      },
      addInxTree (ary, inx) {
        ary.forEach(item => {
          if (!item.level) {
            item.level = inx
          }
          if (item.children && item.children.length > 0) {
            inx++
            this.addInxTree(item.children, inx)
            inx--
          }
        })
      },
      addTreeNode(ary, level, addnode) {
        let levelFlag = false
        ary.forEach(item => {
          if (item.level === level) {
            if (!levelFlag) {
              addnode.level = level + 1
              levelFlag = true
            }
            this.addNodeTem(item, {...addnode})
          } else if (item.children && item.children.length > 0) {
            this.addTreeNode(item.children, level, addnode)
          }
        })
      },
      addNodeTem(obj, addnode) {
        this.id++
        addnode.id = this.id + ''
        // addnode.label = addnode.label + this.id
        if (!obj.children) {
          this.$set(obj, 'children', [])
        }
        obj.children.push(addnode)
      },
      // 快速添加
      handleQueck(val) {
        let obj = {
          label: '添加元素',
          id: '99'
        }
        // let objcopy = clone(this.form.treeData)
        if (this.centerFlag.length>0) {
          this.addTreeNode(this.centerFlag, this.selectParentObj.level, obj)
        } else {
          this.addTreeNode(this.form.treeData, this.selectParentObj.level, obj)
        }
        
        // this.$set(this.form, 'treeData', this.form.treeData)
        let obj11 = clone(this.form)
        this.historyForm.push(obj11)
      },
    },
    created() {
      this.addInxTree(this.form.treeData, 1)
      this.copyForm = clone(this.form)
    }
  }
</script>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .treebox {
    width: 50%;
  }
  .nodesty{
    width: 100%;
    display: inline-block;
  }
  .redflag{
    font-size: 18px;
    background: #00f;
    color: #fff;
  }
</style>